<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片字幕生成器</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; }
        .container { display: flex; flex-direction: column; gap: 20px; }
        .preview-area { border: 1px solid #ccc; min-height: 300px; display: flex; justify-content: center; align-items: center; }
        #imagePreview { max-width: 100%; max-height: 500px; }
        .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; }
        input, textarea, button { width: 100%; padding: 8px; box-sizing: border-box; }
        textarea { height: 150px; }
        .button-group { display: flex; gap: 10px; margin-top: 20px; }
        button { background: #4CAF50; color: white; border: none; cursor: pointer; padding: 10px; }
        button:hover { background: #45a049; }
    </style>
</head>
<body>
    <div class="container">
        <h1>图片字幕生成器</h1>
        
        <div class="form-group">
            <label for="imageUpload">选择图片</label>
            <input type="file" id="imageUpload" accept="image/*">
        </div>
        
        <div class="preview-area">
            <img id="imagePreview" alt="预览图片">
        </div>
        
        <div class="controls">
            <div>
                <div class="form-group">
                    <label for="subtitleHeight">字幕高度 (px)</label>
                    <input type="number" id="subtitleHeight" value="40" min="10" max="100">
                </div>
                <div class="form-group">
                    <label for="fontSize">字体大小 (px)</label>
                    <input type="number" id="fontSize" value="20" min="8" max="50">
                </div>
            </div>
            <div>
                <div class="form-group">
                    <label for="fontColor">字体颜色</label>
                    <input type="color" id="fontColor" value="#FFFFFF">
                </div>
                <div class="form-group">
                    <label for="outlineColor">轮廓颜色</label>
                    <input type="color" id="outlineColor" value="#000000">
                </div>
            </div>
        </div>
        
        <div class="form-group">
            <label for="subtitleText">字幕文本 (每行一段)</label>
            <textarea id="subtitleText" placeholder="输入字幕文本，每行一段"></textarea>
        </div>
        
        <div class="button-group">
            <button id="generateBtn">生成字幕图片</button>
            <button id="saveBtn">保存图片</button>
        </div>
    </div>

    <script>
        const imageUpload = document.getElementById('imageUpload');
        const imagePreview = document.getElementById('imagePreview');
        const generateBtn = document.getElementById('generateBtn');
        const saveBtn = document.getElementById('saveBtn');
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        let originalImage = null;

        // 图片上传处理
        imageUpload.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = (event) => {
                const img = new Image();
                img.onload = () => {
                    originalImage = img;
                    imagePreview.src = event.target.result;
                    imagePreview.style.display = 'block';
                };
                img.src = event.target.result;
            };
            reader.readAsDataURL(file);
        });

        // 生成字幕图片
        generateBtn.addEventListener('click', () => {
            if (!originalImage) {
                alert('请先上传图片');
                return;
            }

            const subtitleHeight = parseInt(document.getElementById('subtitleHeight').value);
            const fontSize = parseInt(document.getElementById('fontSize').value);
            const fontColor = document.getElementById('fontColor').value;
            const outlineColor = document.getElementById('outlineColor').value;
            const subtitleText = document.getElementById('subtitleText').value.trim();
            const lines = subtitleText.split('\n').filter(line => line.trim() !== '');

            if (lines.length === 0) {
                alert('请输入字幕文本');
                return;
            }

            // 设置Canvas尺寸
            canvas.width = originalImage.width;
            canvas.height = originalImage.height;

            // 绘制原始图片
            ctx.drawImage(originalImage, 0, 0);

            // 绘制字幕
            lines.forEach((line, index) => {
                const yPos = originalImage.height - subtitleHeight * (lines.length - index) + fontSize * 0.7;
                const bgY = originalImage.height - subtitleHeight * (lines.length - index);

                // 绘制半透明背景
                ctx.fillStyle = 'rgba(0,0,0,0.5)';
                ctx.fillRect(0, bgY, canvas.width, subtitleHeight);

                // 添加行分割线（除第一行外）
                if (index > 0) {
                    ctx.strokeStyle = 'rgba(255,255,255,0.3)';
                    ctx.lineWidth = 1;
                    ctx.beginPath();
                    ctx.moveTo(0, bgY);
                    ctx.lineTo(canvas.width, bgY);
                    ctx.stroke();
                }

                // 绘制文字轮廓
                ctx.font = `${fontSize}px Arial`;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle'; // 设置文字垂直居中
                ctx.strokeStyle = outlineColor;
                ctx.lineWidth = 2;
                ctx.strokeText(line, canvas.width / 2, bgY + subtitleHeight / 2);

                // 绘制文字填充
                ctx.fillStyle = fontColor;
                ctx.fillText(line, canvas.width / 2, bgY + subtitleHeight / 2);
            });

            // 显示生成结果
            imagePreview.src = canvas.toDataURL('image/png');
        });

        // 保存图片
        saveBtn.addEventListener('click', () => {
            if (!canvas.toDataURL) {
                alert('请先生成字幕图片');
                return;
            }

            const link = document.createElement('a');
            link.download = '带字幕的图片.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
        });
    </script>
</body>
</html>